<template>
    <el-col :span="Number(colspan)">
        <el-form-item
                :prop="name"
                :label-width="labelWidth + 'px'"
                :label="label"
                :title="label"
                v-show="property.p.indexOf('H') === -1">
            <el-date-picker
                    :format="format"
                    :disabled="property.p.indexOf('D') >= 0"
                    v-model="date"
                    type="daterange"
                    :id="'date' + name"
                    align="right"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="onChange" @blur="onBlur"
                    @focus="onFocus">
            </el-date-picker>
        </el-form-item>
    </el-col>
</template>

<script type="es6">
    import moment from 'moment';

    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '140'
            },
            label: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'date'
            },
            format: {
                type: String,
                default: function () {
                    return 'yyyy-MM-dd';
                }
            },
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            },
            isBlur: {
                type: Boolean,
                default: false
            },
            isFocus: {
                type: Boolean,
                default: false
            },
            isRed: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                date: []
            }
        },
        mounted() {
            document.getElementById('date' + this.name).style.color = this.isRed ? 'red' : '';
        },
        methods: {
            /**
             * 点击事件
             */
            onClick() {
                if (!this.isClick) return;
                let obj = {
                    path: this.$route.path + '/doQuery/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 选择事件
             */
            onChange(val) {
                this.date = [];
                let list = [];
                val.forEach(item => {
                    this.date.push(item);
                    list.push(moment(item).format('YYYYMMDD'));
                });
                this.property.value = list.join(',');
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 失去焦点
             */
            onBlur() {
                if (!this.isBlur) return;
                let obj = {
                    path: this.$route.path + '/blur/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 获取焦点
             */
            onFocus() {
                if (!this.isFocus) return;
                let obj = {
                    path: this.$route.path + '/focus/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
    }

    /deep/ .el-date-editor .el-range__icon {
        line-height: 1;
    }

    /deep/ .el-date-editor .el-range-separator {
        line-height: 20px;
    }

    /deep/ .el-date-editor .el-range__close-icon {
        line-height: 20px;
    }

    /deep/ .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 100%;
    }

    /deep/ .el-range-input {
        font-size: 12px;
    }
</style>